<template>
	<view>
		<template v-if="applyType==1">
			<view class="message">
				<view class="message-list">
					<view class="message-list-header">
						<view class="message-list-header-l">
							<image :src="ossUrl + `/static/card/4.png` " mode=""></image>
							入圈申请
						</view>
					</view>
					<view class="message-list-content" v-for="(item,index) in list" :key="item.id">
						<image class="message-list-content-avatar" :src="item.head" @click="toIndexOther(item.id)">
						</image>
						<view class="message-list-content-r">
							<view class="message-list-content-r-tx">
								<view class="message-list-content-r-name">{{ item.nickname || '' }}
								</view>
								<picker mode="selector" :range="selectList" @change="confirm($event,index)">
									<view class="message-list-content-r-tx-address flex-row">
										{{ item.identity || '' }}
										<u-icon name="arrow-down-fill" size="12"></u-icon>
									</view>
								</picker>
							</view>
							<view class="message-list-content-r-btns">
								<view class="message-list-content-r-btns-agree" @click="agree(item)">同意</view>
								<view class="message-list-content-r-btns-rej" @click="reject(item)">拒绝</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="applyType==2">
			<view class="message">
				<view class="message-list">
					<view class="message-list-header">
						<view class="message-list-header-l">
							<image :src="ossUrl + `/static/card/4.png` " mode=""></image>
							视频申请
						</view>
					</view>
					<view class="message-list-content" v-for="(item,index) in list">
						<image class="message-list-content-avatar" :src="item.head" @click="toIndexOther(item.b_id)">
						</image>
						<view class="message-list-content-r">
							<view class="message-list-content-r-tx">
								<view class="message-list-content-r-name">{{ item.nickname || '' }}
								</view>
								<view class="message-list-content-r-tx-address flex-row">
									{{ item.identity || '' }}
								</view>
							</view>
							<view class="message-list-content-r-btns">
								<view class="message-list-content-r-btns-agree" @click="agreeCircle(item)"
									style="padding: 0 20rpx;">查看申请列表</view>
								<view class="message-list-content-r-btns-rej" @click="rejectCircle(item)">拒绝</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</template>
		<template v-if="applyType==3">
			<view class="message">
				<view class="message-list">
					<view class="message-list-header">
						<view class="message-list-header-l">
							<image :src="ossUrl + `/static/card/4.png` " mode=""></image>
							证书申请
						</view>
					</view>
					<view class="message-list-content" v-for="(item,index) in list" :key="item.id" >
						<image class="message-list-content-avatar" :src="item.head"
							@click="toIndexOther(item.b_id)"></image>
						<view class="message-list-content-r">
							<view class="message-list-content-r-tx">
								<view class="message-list-content-r-name">{{ item.nickname || '' }}
								</view>
								<view class="message-list-content-r-tx-address flex-row">
									{{ item.identity != '无' ? item.identity || '' : '' }}
									<!-- <u-icon name="arrow-down-fill" size="12"></u-icon> -->
								</view>
							</view>
							<view class="message-list-content-r-btns">
								<view class="message-list-content-r-btns-agree"
									@click="agreeCertificate(item)">同意</view>
								<view class="message-list-content-r-btns-rej"
									@click="rejectCertificate(item)">拒绝</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</template>

		<view class="painter">
			<l-painter :board="board" style="width: 100%;height: 100%;" ref="painterRef" />
		</view>

		<view class="nomre">暂无更多~</view>
	</view>
</template>

<script>
	import {
		circle_member_list_more,
		circle_member_list_operate,
		circle_view_status,
		agree_certificate,
		refuse_certificate
	} from '@/common/http/api.js'
	import {
		getCertificatePainter
	} from './config'
	import {
		ossUpload,
		ossDel
	} from '@/common/oss.js'
	export default {
		props: {
			value: {
				type: Array,
				default: () => []
			},
			info: {
				type: String | Object
			},
			userInfo: {
				type: Object
			}
		},
		data() {
			return {
				list: [],
				page: 1,
				show: true,
				circle_id: '',
				selectList: [],
				options: [{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					},

				],

				applyType: 1,
				board: {}
			}
		},

		onLoad(e) {
			this.applyType = e.type
			this.circle_id = e.id
			// this.getTableList()
		},
		onShow() {
			this.page=1
			this.getTableList()
		},
		onReachBottom() {
			this.page++
			this.getTableList()
		},

		methods: {



			getTableList() {
				let data = {
					page: 1,
					type: this.applyType,
					circle_id: this.circle_id
				}

				circle_member_list_more(data).then(res => {
					uni.hideLoading()
					this.selectList = res.data.identity.map(i => i.name)

					if (this.page == 1) {
						this.list = res.data.list

					} else {
						if (res.data.list.length == 0) {
							this.page--

						} else {
							this.list = [...this.list, ...res.data.list]
						}
					}



				})

			},


			agreeCertificate(it) {
				uni.showLoading({
					title: '请求中...',
					mask: true
				})
				this.board = getCertificatePainter(it)

				setTimeout(() => {
					this.$nextTick(() => {

						this.$refs.painterRef.canvasToTempFilePathSync({
							fileType: "jpg",
							// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
							pathType: 'url',
							quality: 1,
							success: (res) => {
								console.log(res.tempFilePath);
								// 非H5 保存到相册
								// H5 提示用户长按图另存
								ossUpload(res.tempFilePath, false).then(res => {
	
									let data = {
										certificate: res.url,
										id: it.id
									}
									agree_certificate(data).then(res => {
										uni.hideLoading()
										uni.$u.toast('已同意！')
										this.page = 1
										this.getTableList()
									})
								})
							},
							fail: (err) => {
								console.log('err', err)
								uni.hideLoading()
								uni.$u.toast('生成失败！请稍后再试')
							}
						});
					})
				}, 200)
			},
			rejectCertificate(it) {

				uni.showLoading({
					title: '请求中...',
					mask: true
				})
				let data = {
					id: it.id
				}
				refuse_certificate(data).then(res => {
					uni.hideLoading()
					uni.$u.toast('已拒绝！')
					this.page = 1
					this.getTableList()
				})
			},
			toIndexOther(id) {
				uni.navigateTo({
					url: '/pages/index/other?isBackHome=2&shareId=' + id
				})
			},
			rejectCircle(row) {
				wx.showModal({
					// title: `拒绝`,
					editable: true, // 允许输入
					placeholderText: '拒绝原因', // 输入框提示
					confirmText: '拒绝',
					confirmColor: '#e4393c',
					success: res => {
						if (res.confirm) {

							if (res.content) {
								uni.showLoading({
									mask: true
								})
								circle_view_status({
									id: row.id,
									status: 2,
									prompt: res.content
								}).then(res => {
									uni.hideLoading()
									this.$u.toast('已拒绝')
									this.page = 1
									this.getTableList()
								})
							} else {
								this.$u.toast('请输入拒绝原因！')
							}
						} else if (res.cancel) {
							// 用户点击取消
							console.log('用户取消输入')
						}
					}
				})

			},
			agreeCircle(item) {
				uni.navigateTo({
					url: '/pagesA/circleManage/audit/form?circle_id=' + item.circle_id + '&id=' + item.id
				})
			},
			setIdentity(e, it) {

				uni.showLoading({
					mask: true
				})
				circle_member_list_operate({
					type: 4,
					identity: this.selectList[e.detail.value],
					b_id: it.b_id
				}).then(res => {
					uni.hideLoading()
					// this.$u.toast('删除成功')
					this.$emit('reload')
				})
			},
	
			confirm(e, index) {
				this.list[index].identity = this.selectList[e.detail.value]
				this.show = false
				console.log(this.list)
			},
			agree(e) {
				uni.showLoading({
					mask: true
				})

				circle_member_list_operate({
					type: 1,
					identity: e.identity,
					b_id: e.id
				}).then(res => {
					uni.hideLoading()
					this.$u.toast('已同意')
					this.page = 1
					this.getTableList()

				})
			},
			reject(e) {


				uni.showLoading({
					mask: true
				})
				circle_member_list_operate({
					type: 2,
					b_id: e.id
				}).then(res => {
					uni.hideLoading()
					this.$u.toast('已拒绝')
					this.page = 1
					this.getTableList()
				})
			},
			del() {

			}
		}
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang='scss' scoped>
	.nomre {
		width: 100%;
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}

	.cell {
		padding: 30rpx;
		border-bottom: 1px solid #f5f5f5;

		.text1 {
			font-size: 30rpx;
			font-weight: bold;
		}

		.text2 {
			font-size: 24rpx;
			color: #999;
			margin: 10rpx 0;
		}

		.text3 {
			font-size: 24rpx;
			color: #12B475;

			&>view {
				margin-top: 10rpx;
			}
		}

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			margin-right: 20rpx;
		}

		.intro {
			display: -webkit-box;
			/* 关键属性 */
			-webkit-box-orient: vertical;
			/* 排列方向 */
			-webkit-line-clamp: 2;
			/* 显示行数 */
			overflow: hidden;
			/* 溢出隐藏 */
			text-overflow: ellipsis;
			/* 省略号 */
			word-break: break-word;
			font-size: 24rpx;
			color: #999;
		}
	}

	.message {
		width: 690rpx;
		margin: 0 auto;

		overflow: hidden;

		.message-list {
			width: 100%;
			overflow: hidden;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 19rpx 16rpx;


			.message-list-header {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.message-list-header-l {
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #2B2B2B;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 6rpx;
					}
				}

				.message-list-header-r {
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					.text {

						margin-left: 13rpx;
					}

					image {
						width: 28rpx;
						height: 28rpx;
						margin-left: 8rpx;
					}
				}
			}

			.message-list-content {
				display: flex;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 30rpx;
				border-radius: 30rpx;
				overflow: hidden;
				margin-bottom: 30rpx;

				.message-list-content-avatar {
					width: 100rpx;
					height: 100rpx;
					margin-right: 13rpx;
					border-radius: 50%;
				}

				.message-list-content-r {
					display: flex;
					flex: 1;
					min-width: 0;

					.message-list-content-r-tx {
						flex: 1;
						min-width: 0;

						.message-list-content-r-name {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #211C1E;
						}

						.message-list-content-r-tx-subTitle {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							margin-bottom: 16rpx;
						}

						.message-list-content-r-tx-address {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							width: 100%;
							margin-right: 10rpx;
						}
					}

					.message-list-content-r-btns {
						min-width: 130rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;

						.message-list-content-r-btns-agree {
							min-width: 130rpx;
							height: 55rpx;
							background: #12B475;
							border-radius: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							margin-bottom: 20rpx;
						}

						.message-list-content-r-btns-rej {
							width: 131rpx;
							height: 56rpx;
							border-radius: 28rpx;
							border: 1px solid #C8C8C8;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #211C1E;
						}
					}
				}
			}

			.message-list-comment {
				height: 170rpx;
				width: 100%;
				position: relative;

				&>image {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
				}

				&>view {
					width: calc(100% - 30rpx);
					position: absolute;
					top: 46rpx;
					left: 15rpx;
					z-index: 3;

					.message-list-comment-item {

						display: flex;
						justify-content: space-between;

						text {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
					}

					.message-list-comment-r {
						justify-content: unset;
						border-bottom: 1rpx solid #E5E5E5;
						padding-bottom: 18rpx;
						margin-bottom: 18rpx;
					}
				}
			}
		}
	}

	.list {
		width: 100%;

		.list-item {
			width: 100%;
			margin-bottom: 20rpx;
		}
	}

	.painter {
		width: 1280rpx;
		height: 1810rpx;
		position: fixed;
		left: -200%;
	}
</style>